<!doctype html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="/static/styles/bootstrap-5.3.0-alpha1-dist/css/bootstrap.css">
    <title>编辑待办事项</title>
    <style>        .card {
            width: 30%;
            margin: 0 auto;
            margin-top: 10%;
        }
    </style>
    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>        $(document).ready(function () {
            // 给提交按钮绑定点击事件
            $('.submit-button').click(function (event) {
                event.preventDefault(); // 阻止默认提交行为

                // 获取表单数据
                var formData = $('form').serialize();

                // 发送 AJAX 请求
                $.ajax({
                    url: 'update',
                    type: 'POST',
                    data: formData,
                    success: function (response) {
                        // 根据服务器返回的结果更新页面
                        console.log(response);

                        // 页面跳转
                        window.location.href = '/todo/list';
                    },
                    error: function (xhr, status, error) {
                        // 处理错误情况
                        alert('表单提交失败');
                        console.error(error);
                    }
                });
            });
        });
    </script>
</head>
<body>
<div class="card">
    <div class="card-body">
        <form action="update" method="post">
            <input type="hidden" name="id" value="${todo.id}">
            <div class="form-group">
                <label for="content">内容</label>
                <input type="text" class="form-control" id="content" name="content" placeholder="请输入待办事项内容" value="${(todo.content)!''}">
            </div>
            <div class="field">
                <label for="content">内容类型</label>
                <select name="contenttype" class="form-control" required>
                    <option value="1" <#if (todo.contenttype == '学习')>selected</#if>>学习</option>
                    <option value="2" <#if (todo.contenttype == '生活')>selected</#if>>生活</option>
                    <option value="3" <#if (todo.contenttype == '工作')>selected</#if>>工作</option>
                    <option value="4" <#if (todo.contenttype == '娱乐')>selected</#if>>娱乐</option>
                    <option value="5" <#if (todo.contenttype == '其他')>selected</#if>>其他</option>
                </select>
            </div>
            <div class="field">
                <select name="complete" class="form-control">
                    <option value="false">未完成</option>
                    <option value="true" <#if (todo.complete)>selected</#if>>已完成</option>
                </select>
            </div>
            <div class="field">
                <button type="button" class="submit-button btn btn-primary">保存</button>
            </div>
        </form>
    </div>
</div>
</body>
</html>